<template>
  <div class="main-area-box">
    <div class="up-area-box">
      <!-- 左侧图片区域 -->
      <div class="flex-center-t">
        <div>
          <img class="width-360 height-360" :src="entity.picUrl" alt=""/>
          <div>
            <template v-if="imageList.length > 1">
              <el-carousel :interval="5000" arrow="always" :autoplay="false" height="64" indicator-position="none">
                <el-carousel-item v-for="(item, index) in imageList" :key="index" >
                  <div class="swiper-item-img">
                    <img v-for="(subitem, subindex) in item" 
                      :key="subindex" 
                      :src="subitem.imageUrl" 
                      :class="entity.picUrl == item.imageUrl ? 'mouse-selected' : ''" 
                      @mouseenter="mousePicEnter(item)" 
                      alt=""/>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </template>
            <template v-else>
              <div class="swiper-item-img">
                <img v-for="(item, index) in imageList[0]" 
                  :key="index" :src="item.imageUrl" 
                  :class="entity.picUrl == item.imageUrl ? 'mouse-selected' : ''" 
                  @mouseenter="mousePicEnter(item)" 
                  alt="" />
              </div>
            </template>
          </div>
        </div>
        <div class="area-right mar-l-20 mar-t-20">
          <div class="font-24 font-w">{{ entity.title }}</div>
          <div class="supply-price font-14">
            <span class="mar-r-20">供货价</span>
            <span>￥{{ entity.minSupplierPrice }}</span>
            <span v-if="entity.maxSupplierPrice"> ~ ￥{{ entity.maxSupplierPrice }}</span>
            <template v-if="entity.minMarketPrice">
              <div style="margin-top: 12px">
                <span class="mar-r-20">淘宝零售价</span>
                <span>￥{{ entity.minMarketPrice }}</span>
                <template v-if="entity.maxMarketPrice">
                  ~ ￥{{entity.maxMarketPrice}}
                </template>
              </div>
            </template>
          </div>
          <div class="other-info-box">
            <span>库存&nbsp;&nbsp;<span>{{ entity.stock }}</span></span>
            <span>销量&nbsp;&nbsp;<span>{{ entity.salesNum }}</span></span>
            <span>店铺&nbsp;&nbsp;<span class="font-blue">{{ entity.shopName }}</span></span>
          </div>
          <div class="btn-group-box">
            <span class="addBtn" style="cursor: pointer" @click.stop="addToStore(entity.itemId)" v-if="entity.warehouseType == 0" >添加到仓库</span>
            <!-- <span class="backBtn" @click="$router.go(-1)" style="cursor: pointer" >返回</span> -->
            <span class="backBtn" @click="closeWindow">关闭</span>
          </div>
        </div>
      </div>
    </div>
    <div class="down-area-box" style="margin-top: 20px">
      <div>
        <el-tabs type="card" v-model="tabsVal">
          <el-tab-pane label="商品详情" name="1">
            <div class="goods-info-box">
              <ul>
                <li>建议分类：{{ entity.categoryName }}</li>
                <li>商品重量：{{ entity.weight }}</li>
                <li>商品体积：{{ entity.size }}</li>
                <li>商品产地: {{ entity.prov + ' ' + entity.city }}</li>
                <li>限购:</li>
              </ul>
              <div class="goods-img-box">
                <div v-html="entity.description"></div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="SKU信息" name="2">
            <!-- 商品规格表格 -->
            <div class="goods-info-box">
              <div class="goods-img-box">
                <el-table :data="skuList" :stripe="false">
                  <el-table-column label="规格" prop="skuDetail"></el-table-column>
                  <el-table-column label="供货价" prop="supplierPrice"></el-table-column>
                  <el-table-column label="淘宝零售价" prop="marketPrice"></el-table-column>
                  <el-table-column label="库存" prop="quantity"></el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="运费规则" name="3">
            <div class="goods-info-box">
              <div class="goods-img-box">
                <div class="goods-img-box">
                  <div v-for="(item, index) in entity.postageList" :key="index">
                    <div class="font-w">配送区域</div>
                    <div>{{item.postAreaNames}}</div>
                    <div class="font-w">运费标准({{dict.postType&&dict.postType[item.postType]}})</div>
                    <div>{{item.startStandard}}{{dict.valuation&&dict.valuation[item.valuation]}}以内，运费{{item.startFee}}元，每增加{{item.addStandard}}{{dict.valuation&&dict.valuation[item.valuation]}}，运费增加{{item.addFee}}元</div>
                    <hr>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--关联企业分类-->
    <el-dialog width="500px" title="请关联企业分类" :visible.sync="dialogVisible">
     <div class="text-align-c pad-t-20 pad-b-30">
        <el-cascader
          style="width: 200px"
          v-model="enCategoryIds"
          :props="{ checkStrictly: true }"
          change-on-select
          placeholder="选择商品分类"
          :options="enCategoryList"
          class="default-input"
          clearable
        ></el-cascader>
     </div>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSetCategory">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTaobaoGoodsDetail, saveJoinProjectGoods } from '@/api/goods/taobaoGoods'
import { listGoodsCategory, saveEnterpriseThirdCategory } from '@/api/goods/goods'
import { getDictByGroupName } from '@/api/common/common'

export default {
  data() {
    return {
      itemId: '',
      entity: {},
      imageList: [],
      skuList: [],
      enCategoryList: [],
      enCategoryIds: [],
      dialogVisible: false,
      tabsVal: '1',
      initIndex: 0,
      temp: []
    }
  },
  // 初始化页面
  created() {
    const queryParams = this.getCurrentPage().query
    const itemId = queryParams.itemId
    if (itemId) {
      this.itemId = itemId
    }
    getDictByGroupName('TaoBaoPostageDTO').then(response => {
      if (response.isError) return
      this.dict = response.data
    })
    this.getDetail()
  },
  mounted() {},
  methods: {
    // 图片鼠标移入事件
    mousePicEnter(item) {
      if (item) {
        this.entity.picUrl = item.imageUrl
      }
    },
    closeWindow() {
      window.close()
    },
    addToStore(itemId) {
      saveJoinProjectGoods(itemId, this.getEnterpriseId()).then((response) => {
        if (response.isError) return
        if (response.data === true) {
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.getDetail()
          return
        }
        this.listGoodsCategory()
      })
    },
    onSetCategory() {
      if (this.enCategoryIds === '' || this.enCategoryIds.length === 0) {
        this.$message.error('请选择要关联的分类')
        return
      }
      let categoryId = ''
      if (this.enCategoryIds.length === 1) {
        categoryId = this.enCategoryIds[0]
      }
      if (this.enCategoryIds.length === 2) {
        categoryId = this.enCategoryIds[1]
      }
      if (this.enCategoryIds.length === 3) {
        categoryId = this.enCategoryIds[2]
      }
      saveEnterpriseThirdCategory(
        categoryId,
        this.entity.categoryId,
        3
      ).then((response) => {
        if (response.isError) return
        this.$message({
          message: '成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.getDetail()
      })
    },
    // 获取类目
    listGoodsCategory() {
      const enterpriseId = this.getEnterpriseId()
      listGoodsCategory(enterpriseId).then((response) => {
        this.enCategoryList = response.data
        this.dialogVisible = true
      })
    },
    getDetail() {
      getTaobaoGoodsDetail(this.itemId, this.getEnterpriseId()).then((response) => {
        if (response.isError) return
        this.entity = response.data
        this.skuList = response.data.skuList
        for (let i = 0; i < response.data.imageList.length; i++) {
          if (i % 5 === 0) {
            this.initIndex = parseInt(i / 5)
            this.imageList[this.initIndex] = []
          }
          this.imageList[this.initIndex].push(response.data.imageList[i])
        }
        if (this.imageList.length > 1) {
          this.mousePicEnter(this.imageList[0])
        } else {
          this.mousePicEnter(this.imageList[0][0])
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main-area-box {
  width: 100%;
  height: 100%;
  background: #f7f9fb;
  padding: 10px;
  .up-area-box {
    background: #fff;
    padding-top: 10px;
    .main-img-box {
      .main-img {
        img {
          width: 360px;
          height: 360px;
        }
      }
    }
    .goods-title {
      font-size: 20px;
      font-weight: 400;
      color: #323233;
      line-height: 30px;
    }
    // .supply-price {
    //   width: 625px;
    //   font-size: 14px;
    //   padding: 20px 10px;
    //   background: #f9f9fa;
    //   color: #666666;
    //   display: flex;
    //   justify-content: center;
    //   flex-direction: column;
    //   margin-top: 20px;
    //   & > div {
    //     span:nth-child(2) {
    //       margin-left: 40px;
    //     }
    //   }
    // }
    .other-info-box {
      font-size: 14px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eeeeee;
      & > span {
        padding-left: 13px;
        padding-right: 13px;
      }
      & > span:nth-child(1),
      & > span:nth-child(2) {
        color: rgba(255,255,255,0.5);
      }
    }
    .goods-table-info {
      /deep/ .el-table__row {
        font-size: 14px;
        color: #323233;
        img {
          width: 40px;
          height: 40px;
        }
      }
      /deep/ .is-leaf {
        border: none;
        background: #fff;
        color: rgba(255,255,255,0.5);
        font-weight: 400;
        font-size: 14px;
      }
    }
    .btn-group-box {
      display: flex;
      padding-top: 57px;
      padding-bottom: 30px;
      & > span {
        width: 162px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        border-radius: 4px;
        text-align: center;
      }
      .addBtn {
        color: #fff;
        background: #ff5a00;
        margin-left: 152px;
      }
      .backBtn {
        color: #ff5a00;
        background: #fff2ee;
        margin-left: 14px;
      }
    }
    /deep/ .el-carousel__container {
      width: 360px;
      height: 64px;
      & .el-carousel__item {
        height: 64px;
      }
      .swiper-item-img {
        width: 360px;
        display: flex;
        justify-content: flex-start;

        img {
          width: 64px;
          height: 64px;
          margin-left: 10px;
        }
        & > img:nth-child(1) {
          margin-left: 0;
        }
      }
    }
    .swiper-item-img {
      width: 360px;
      display: flex;
      justify-content: flex-start;
      img {
        width: 64px;
        height: 64px;
        margin-left: 10px;
      }
      & > img:nth-child(1) {
        margin-left: 0;
      }
    }
  }
  .down-area-box {
    background: #fff;
    padding-bottom: 50px;
    /deep/ .el-tabs--card {
      .el-tabs__header {
        border: none;
      }
    }
    /deep/ .el-tabs__nav-scroll {
      margin-left: 540px;
      .el-tabs__nav {
        border: none;
        .is-active {
          border-top: 2px solid #ff5a00;
        }
      }
    }
    .goods-recomment-area {
      width: 30%;
      margin-left: 540px;
      font-size: 16px;
      line-height: 30px;
      color: #333333;
    }
    .goods-info-box {
      // margin-left: 540px;
      & > ul {
        list-style: none;
        width: 686px;
        margin: 0 auto;
        background: #f9f9fa;
        font-size: 14px;
        color: #333333;
        display: flex;
        padding: 13px 20px;
        flex-wrap: wrap;
        li {
          width: 33.33%;
        }
      }
      .goods-img-box {
        width: 790px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        img {
          width: 500px;
        }
      }
    }
  }
}
.flex-center-t{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  .supply-price{
    padding: 20px 10px;
    background: #f9f9fa;
    color: rgba(255,255,255,0.5);
    margin-top: 10px;
  }
}
.area-right{
  width: 650px;
  line-height: 1.4;
}
.mouse-selected {
  border: 2px solid #f40;
}
</style>
